<template>
  <div id="app">
    <router-view />
    <player></player>
  </div>
</template>

<script>
import Player from '@/components/player/player'
export default {
  name: 'App',
  components: {
    Player
  }
}
</script>

<style lang="stylus">
@import './assets/styles/iconfont/iconfont.css';

html, body {
  height: 100%;
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
}

.van-nav-bar {
  background: url('./assets/images/bg.png') no-repeat top;
  background-size: cover;

  .van-icon {
    color: #ffffff;
  }

  .van-nav-bar__title {
    color: #ffffff;
    font-weight: 200;
  }

  .song-icon {
    color: #ffffff;
    font-size: 0.36rem;
  }
}

.van-tabs__nav {
  background: url('./assets/images/bg.png') no-repeat center -44px;
  background-size: cover;
}

.van-tabs__line {
  height: 0.04rem;
}

.van-hairline--top-bottom::after {
  border: 0;
}

.van-tabs__wrap--scrollable .van-tab {
  flex-basis: auto !important;
  padding: 0 0.34rem;
}

.songlist-detail {
  .van-nav-bar {
    background: none;
  }
}

.recommend-wrap {
  .van-nav-bar {
    background: none;
  }
}
</style>
